<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="./css/index.css">
		<link rel="stylesheet" href="./css/chart.css">
		<script src="./js/vue.js"></script>
		<script src="js/jquery-3.5.1.js"></script>
		<script src="./js/echarts.js"></script>
	</head>
	<body>
		<div id="header">
			<div class="cont">
				<div class="topbar-nav">
					<a href="./index.html" style="float: left;">首页</a>
					<!-- <div v-for="type in types" style="float: left;">
						<span class="sep">|</span>
						<a href="#" v-bind:id-name="type.type" onclick="onClick(this)">{{ type.type }}</a>
					</div> -->
				</div>
				<div class="topbar-cart" id="J_miniCartTrigger">
					<a href="#" id="J_miniCartBtn" class="iconfont">购物车<span class="iconfont">（0）</span></a>
					<div class="cart-menu" id="J_miniCartMenu">
						<div class="loading">购物车中还没有商品，赶紧选购吧！</div>

					</div>

				</div>
				<div class="topbar-info" id="J_userInfo">
					<a class="link" href="">登录</a>
					<span class="sep">|</span>
					<a href="">问答</a>
					<span class="sep">|</span>
					<a href="">联系我们 </a>
				</div>

			</div>
		</div>

		<div>
			<!-- 左侧菜单 -->
			<div id="left">
				<div><a href="./type.html">Type</a></div>
				<div style="background-color: #B0B0B0;"><a href="./movie.html">Movie</a></div>
				<div><a href="./visit.html">Visit</a></div>
				<div><a href="./ip.html">IP</a></div>
			</div>

			<div id='main'>
				<div id='content'>
					<p>type Count : 12</p>
				</div>

				<div id="chart">
					<!--  chart 信息 -->
					<div id="pie"></div>

					<!-- 折线图 -->
					<div id="linechart"></div>
				</div>
			</div>
		</div>

		<script type="text/javascript">
			// 类型填充
			type = [{
				type: "动画"
			}, {
				type: "成长"
			}, {
				type: "励志"
			}, {
				type: "科幻"
			}]

			$.ajax({
				url: "http://localhost:8888/types",
				contentType: "application/x-www-form-urlencoded",
				type: "get",
				dataType: 'json',
				success: function(data) {
					type = data;
					console.log(data);
					var type = new Vue({
						el: ".topbar-nav",
						data: {
							types: type
						}
					});
				},
				error: function() {}

			});

			// pie 图形
			var pie = echarts.init(document.getElementById("pie"))

			var pie_option = {
				title: {
					text: 'Referer of a Website',
					left: 'center'
				},
				tooltip: {
					trigger: 'item'
				},
				series: [{
					name: 'Access From',
					type: 'pie',
					radius: '70%',
					data: [{
							value: 1048,
							name: 'Search Engine'
						},
						{
							value: 735,
							name: 'Direct'
						},
						{
							value: 580,
							name: 'Email'
						},
						{
							value: 484,
							name: 'Union Ads'
						},
						{
							value: 300,
							name: 'Video Ads'
						}
					],
					emphasis: {
						itemStyle: {
							shadowBlur: 10,
							shadowOffsetX: 0,
							shadowColor: 'rgba(0, 0, 0, 0.5)'
						}
					}
				}]
			};

			pie.setOption(pie_option)

			// 折线图
			var liner = echarts.init(document.getElementById("linechart"))

			var line_option = {
				title: {
					text: 'Stacked Line'
				},
				tooltip: {
					trigger: 'axis'
				},
				legend: {
					data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
				},
				grid: {
					left: '3%',
					right: '4%',
					bottom: '3%',
					containLabel: true
				},
				toolbox: {
					feature: {
						saveAsImage: {}
					}
				},
				xAxis: {
					type: 'category',
					boundaryGap: false,
					data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
				},
				yAxis: {
					type: 'value'
				},
				series: [{
						name: 'Email',
						type: 'line',
						stack: 'Total',
						data: [120, 132, 101, 134, 90, 230, 210]
					},
					{
						name: 'Union Ads',
						type: 'line',
						stack: 'Total',
						data: [220, 182, 191, 234, 290, 330, 310]
					},
					{
						name: 'Video Ads',
						type: 'line',
						stack: 'Total',
						data: [150, 232, 201, 154, 190, 330, 410]
					},
					{
						name: 'Direct',
						type: 'line',
						stack: 'Total',
						data: [320, 332, 301, 334, 390, 330, 320]
					},
					{
						name: 'Search Engine',
						type: 'line',
						stack: 'Total',
						data: [820, 932, 901, 934, 1290, 1330, 1320]
					}
				]
			};

			liner.setOption(line_option)

			// 请求参数
			$.ajax({
				url: "http://localhost:8888/movies",
				contentType: "application/x-www-form-urlencoded",
				type: "get",
				dataType: 'json',
				success: function(data) {
					console.log(data)

					update(data)
				},
				error: function() {}
			});
		</script>

	</body>
</html>
